<%var csstpl = {%>
<style>
    .show-big:hover {
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
        -o-transform: scale(3);
        position: relative;
        z-index: 9999;
        background-color: aliceblue;
    }
</style>
<%};%>
<%var jstpl = {%>
<script>
    var app = new Vue({
        el: "#content",
        data: {
            query: {
                name: '',
                phone: '',
                type:'',
                pageNumber: 1,
                pageSize: 10
            },
            data_result: {},
            agent: '',
            agentCity: '',
            state: false,
            levels: [],
            rechargeAgentCitys: [{}],
            item: {},
            rechargeAgent: {},
            agentObj:{}
         },
        created: function() {
            this.loadPage("init")
            // 在这试试
            let form = layui.form;
            form.render();
        },
        mounted() {
            let form = layui.form;
            let laydate = layui.laydate;
            let that = this;

            form.on('submit(updateStockNum)', function(data) {
                let datas = data.field;
                Ajax("/system/agent/updateStockNum", datas, function(res) {
                    if (res.state) {
                        gx.alert(res.msg);
                        that.loadPage("init");
                        $("#auditModal").modal('hide');
                    } else {
                        gx.alert(res.msg);
                    }
                })
            });
            form.on('radio(state)', function(data) {

                that.agentCity.status = data.value;
                that.$nextTick(function() {
                    form.render();
                })
            });
            form.on('submit(formDemo)', function(data) {
                let datas = data.field
                Ajax("/system/agent/audit", datas, function(res) {
                    if (res.state) {
                        gx.alert(res.msg);
                        that.loadPage("init");
                        $("#auditModal").modal('hide');
                    } else {
                        gx.alert(res.msg);
                    }
                })
            });

            form.on('submit(rechargeSubmit)', function(data) {
                alert("come in...");
                let datas = data.field
                Ajax("/system/agent/recharge", datas, function(res) {
                    if (res.state) {
                        gx.alert(res.msg);
                        that.loadPage("init");
                        $("#rechargeModal").modal('hide');
                    } else {
                        gx.alert(res.msg);
                    }
                })
            });

            laydate.render({
                elem: '#downTimes',
                type: 'datetime',
                range: true,
                change: function(value, date, endDate) {
                },
                done: function(value, date, endDate) {
                }
            });

            form.on('submit(downLoadAgent)', function(data) {
                let datas = data.field
                // Ajax("/system/agent/downLoadAgent", {times:datas.downTimes}, function(res) {
                //     if (res.state) {
                //         $("#rechargeModal").modal('hide');
                //     } else {
                //         gx.alert(res.msg);
                //     }
                // })
                location.href='/system/agent/downLoadAgent?times='+datas.downTimes;
            });

        },
        methods: {
            loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
                if (model == "init") {
                    this.query.pageNumber = 1;
                }
                Ajax("/system/agent", this.query, function(d) {
                    console.log(d);
                    app.data_result = d.list;
                    if (d.firstPage == true) {
                        layui.laypage.render({
                            elem: 'gexin_page',
                            layout: ['count', 'prev', 'page', 'next','limit', 'skip'],
                            count: d.totalRow,
                            limit: app.query.pageSize,
                            jump: function(obj, first) {
                                app.query.pageNumber = obj.curr;
                                if (app.query.pageSize != obj.limit) {
                                    app.query.pageSize = obj.limit;
                                    app.loadPage("init");
                                    return;
                                }
                                if (!first) {
                                    app.loadPage("load");
                                }
                            }
                        });
                    }
                })
            },
            audit: function(city, agent) {
                this.agentCity = city;
                this.agent = agent;
                let form = layui.form;
                this.$nextTick(function() {
                    form.render();
                    $("#auditModal").modal('show');
                })
            },
            recharge: function(agent) {
                let that = this;
                let form = layui.form;
                that.rechargeAgent = agent;
                Ajax('/system/agent/findAgentCity', {
                    id: agent.id
                }, function(res) {
                    that.rechargeAgentCitys = res;
                    that.$nextTick(function() {
                        form.render();
                        $("#rechargeModal").modal('show');
                    })
                })
            },
            open: function(d) {
                Vue.set(d, 'open', !d.open)
            },
            changeAgentType: function(id) {
                let that = this;
                Ajax('/system/agent/changeAgentType', {
                    agent_id: id
                }, function(res) {
                    if (res.state) {
                        gx.alert(res.msg);
                        that.loadPage("init");
                    } else {
                        gx.alert(res.msg);
                    }
                })
            },
            downLoad:function(){
                let form = layui.form;
                this.$nextTick(function() {
                    form.render();
                    $("#dowmLoadModal").modal('show');
                })
            },
            disable: function(id,status) {
                let that = this;
                gx.confirm("确认修改代理商状态?", function() {
                    Ajax("/system/agent/disablel", {
                        id: id,
                        status: status
                    }, function(ret) {
                        if (ret.state) {
                            that.loadPage("init");
                            gx.alert(ret.msg);
                        } else {
                            gx.alert(ret.msg);
                        }
                    })
                })
            }

    }
    })
</script>
<%};%>
<%layout("../layout/_layout_layui.html",{title:"代理商管理",jstpl:jstpl,csstpl:csstpl}){%>
<div class="layui-row" id="content" v-cloak>




    <div class="layui-col-md10">
        <div class="layui-form-item ">
            <div class="layui-input-inline">
                <select v-model="query.type" class="layui-input" lay-filter="selectProductId" placeholder="选择代理等级">
                    <option value=''>选择代理等级</option>
                    <option value='1'>普通代理商</option>
                    <option value='0'>区域代理商</option>
                    <option value='2'>二级代理商</option>
                    <option value='3'>特约代理商</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <input type="text" v-model="query.name" placeholder="输入代理商名称模糊查询" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" v-model="query.phone" placeholder="输入联系电话模糊查询" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-col-md2">
        <div class="layui-form-item">
            <a @click="loadPage('init')" class="layui-btn"><i class="layui-icon">&#xe615;</i> 查询/筛选</a>
            <a @click="downLoad" class="layui-btn"><i class="layui-icon">&#xe601;</i> 导出</a>
        </div>
    </div>
    <div class="layui-col-md12" style="margin-top: 20px">
        <table class="layui-table ">
            <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>代理商名称</th>
                <th>代理商电话</th>
                <th>地址</th>
                <th>折扣点</th>
                <th>状态</th>
                <th>可用金额</th>
                <th>归口净销售额</th>
                <th>当前累计销售额</th>
                <th>类型</th>
                <th>是否平台邀请</th>
                <th>推广二维码</th>
                <th>邀请代理商二维码</th>
                <th>审核时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody v-for="d in data_result">
            <tr>
                <td @click="open(d)">
                    <i v-show="!d.open" class="layui-icon">&#xe623;</i>
                    <i v-show="d.open" class="layui-icon">&#xe625;</i>
                </td>
                <td>{{d.id}}</td>
                <td>{{d.agent_name}}</td>
                <td>{{d.agent_phone}}</td>
                <td>{{d.address}}</td>
                <td>{{d.discountNumber}}</td>
                <td>{{d.status==1?'审核通过':d.status==0?'未审核':''}}</td>
                <td>{{d.price}}</td>
                <td>{{d.net_sales_all}}</td>
                <td>{{d.accumulated_income}}</td>
                <!-- 就是下面这个图片 -->
                <td>{{d.type==0?'区域代理商':d.type==1?'普通代理商':d.type==2&&d.parent_id==null?'二级代理商':d.type==3&&d.parent_id!=null?'特约代理商':''}}</td>
                <td>{{d.is_platform_agent==1?"是":'否'}}</td>
                <td><img class="show-big" style="height: 80px" :src='d.qr_code_img'></td>
                <td><img class="show-big" style="height: 80px" :src='d.agent_qr_code_img'></td>
                <td>{{d.modified_time}}</td>
                <td>{{d.status}}</td>
                <td>
                    <a v-if="d.type==0" class="layui-btn layui-btn-sm" :href="'/system/agent/accountStockNum?agent_id='+d.id">库存管理</a>
                    <!--<a class="layui-btn layui-btn-sm" @click="recharge(d)">充值</a>-->
                    <a class="layui-btn layui-btn-sm" :href="'/system/agent/orderList?agent_id='+d.id">订单列表</a>
                    <a class="layui-btn layui-btn-sm" :href="'/system/agent/accountList?agent_id='+d.id">账单流水</a>
                    <a class="layui-btn layui-btn-sm" :href="'/system/agent/extensionUser?agent_id='+d.id">已邀请用户</a>
                    <a class="layui-btn layui-btn-sm" @click='changeAgentType(d.id)'>改变经销商归属</a>
                    <a class="layui-btn layui-btn-sm" v-if="d.type==2" :href="'/system/agent/extensionAgent?agent_id='+d.id">已邀请的特约经销商</a>
                    <a class="layui-btn layui-btn-sm" v-if="d.status==99" @click="disable(d.id,1)">解除禁用</a>
                    <a class="layui-btn layui-btn-sm" v-if="d.status!=99" @click="disable(d.id,99)">禁用代理商</a>

                </td>
            </tr>






            <tr v-show="d.open&&d.cityList&&d.cityList.length>0">
                <td colspan="2">城市名称</td>
                <td colspan="1">申请时间</td>
                <td colspan="1">是否通过</td>
                <td colspan="1">代理等级</td>
                <td colspan="2">审核时间</td>
                <td colspan="2">代理金额</td>
                <td colspan="2">累计收益</td>
                <td colspan="1">代理折扣</td>
                <td colspan="1">销售数量</td>
                <!-- <td colspan="2">操作</td> -->
            </tr>
            <tr v-show="d.open&&d.cityList&&d.cityList.length>0" v-for="city in d.cityList">
                <td colspan="2">{{city.cityName}}<span v-if="city.area_id!=0"> - {{city.areaName}}</span></td>
                <td colspan="1">{{city.time}}</td>
                <td colspan="1">{{city.status==0?'未审核':city.status==1?'审核通过':'审核失败'}}</td>
                <td colspan="1">{{city.levelName}}</td>
                <td colspan="2">{{city.audit_time}}</td>
                <td colspan="2">{{city.agency_fee}}</td>
                <td colspan="2">{{city.accumulated_income}}</td>
                <td colspan="1">{{city.discount}}</td>

<!--                <td colspan="1" layui-btn layui-btn-sm>-->
<!--                    {{d.stockNum}}-->
<!--                    <a @click="editStockNum(d)" class="layui-btn layui-btn-sm">修改</a>-->
<!--                </td>-->

<!--                <td colspan="1">-->
<!--                    {{d.saleNum}}-->
<!--                 </td>-->

                <!-- <td colspan="2">
                    <a class="layui-btn layui-btn-sm" @click="audit(city,d)">审核</a>
                </td> -->
            </tr>
            </tbody>
            <tbody id="tbody_body" v-if="data_result.length==0">
            <tr>
                <td colspan="13" style="text-align:center;height:300px">
                    <h1>没有数据</h1>
                </td>
            </tr>
            </tbody>
        </table>
        <fieldset id="gexin_page" class="layui-elem-field layui-field-title"></fieldset>
    </div>

    <div class="modal fade" id="rechargeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="auditForm" class="layui-form form-horizontal ">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            代理商充值
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!-- 弹出框开始  -->
                        <div class="layui-row layui-col-space15">
                            <!-- 弹出框开始  -->
                            <input type="hidden" id="rechargeAgent.id" v-model="rechargeAgent.id" name="agentId">
                            <div class="layui-form-item">
                                <label class="layui-form-label">代理商</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" lay-verify="required" v-model="rechargeAgent.agent_name" readonly />
                                </div>
                            </div>
                            <div>
                                <label class="layui-form-label">充值区域</label>
                                <div class="layui-input-block">
                                    <select name="id">
                                        <option>选择充值的区域</option>
                                        <option :value="item.id" v-for="item in rechargeAgentCitys">{{item.cityName}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">充值金额</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" name="price" lay-verify="required|number" placeholder="请输入充值金额">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="rechargeSubmit">提交</button>
                                <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>




    <div class="modal fade" id="dowmLoadModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="auditForm" class="layui-form form-horizontal ">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            导出列表
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!-- 弹出框开始  -->
                        <div class="layui-row layui-col-space15">
                            <!-- 弹出框开始  -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">时间段</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" id='downTimes' name="downTimes" lay-verify="required" placeholder="选择导出时间段">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="downLoadAgent">提交</button>
                                <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>




    <div class="modal fade" id="auditModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="auditForm" class="layui-form form-horizontal ">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            审核代理商
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!-- 弹出框开始  -->
                        <div class="layui-row layui-col-space15">
                            <!-- 弹出框开始  -->
                            <input type="hidden" id="city.state" :value="agentCity.id" name="agentCity.id">
                            <input type="hidden" id="city.city_id" :value="agentCity.city_id" name="agentCity.city_id">
                            <input type="hidden" id="city.agent_id" :value="agent.id" name="agentCity.agent_id">
                            <div class="layui-form-item">
                                <label class="layui-form-label">代理商</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" lay-verify="required" v-model="agent.agent_name" readonly placeholder="请输入资源的名称">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">城市名称</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" lay-verify="required" v-model="agentCity.cityName" readonly placeholder="请输入资源的名称">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">审核状态</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="radio" lay-filter="state" title="通过" v-model="agentCity.status" value="1" name="agentCity.status">
                                    <input class="layui-input" type="radio" lay-filter="state" title="不通过" v-model="agentCity.status" value="0" name="agentCity.status">
                                </div>
                            </div>
                            <div v-if="agentCity.status==1">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">缴纳金额</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" type="text" lay-verify="required" name="price" 　placeholder="请输入缴纳的金额">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择代理等级</label>
                                    <div class="layui-input-block">
                                        <select name="agentCity.level_id" lay-filter="level_id">
                                            <option value=''>请选择代理商级别</option>
                                            <%for(level in levelList){%>
                                            <option value='${level.id}'>${level.name}</option>
                                            <%}%>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<%};%>